<?php 
	$f_name = "";
	$l_name= "";
	$tran_id ="";
	$create_dt = "";
	$cust_id = "";
	
	if(!empty($customer)){
		$f_name = $customer->F_Name;
		$l_name = $customer->L_Name;
	}
	if(!empty($result)){
		$tran_id =$result->Tran_ID;
		if(!$goto)
			$create_dt = date("d/m/Y",$result->Create_Dt);
		$cust_id = $result->Cust_ID;
	}
	
?>
<link rel='stylesheet' href='<?php echo base_url()?>resources/jquery-popbox/popbox.css' type='text/css' media='screen' charset='utf-8'>
<script type='text/javascript' charset='utf-8' src='<?php echo base_url()?>resources/jquery-popbox/popbox.js'></script>
<script type="text/javascript">
 $(function() {
	//init khoi tao
	reset_service();
	
	//attach autocomplete
	$( "#nguoitip" )
	// don't navigate away from the field on tab when selecting an item
      .bind( "keydown", function( event ) {
        if ( event.keyCode === $.ui.keyCode.TAB &&
            $( this ).data( "ui-autocomplete" ).menu.active ) {
          event.preventDefault();
        }
      })
	.autocomplete({
		source: "<?php echo base_url()?>transaction/searchnv",
		focus: function() {
          // prevent value inserted on focus
          return false;
        },
		minLength: 1,
		select: function( event, ui ) {
			var friend = ui.item.value,
			span = $("<span>").text(friend),
			a = $("<a>").addClass("remove").attr({
					href: "javascript:",
					title: "Remove " + friend
				}).text("x").appendTo(span);
						
			//add friend to friend div
			span.insertBefore("#nguoitip");	
			span.append("<input type='hidden' class='ee_id' name='ee_id[]' value='"+ui.item.id+"' />");
			$("#nguoitip").val("");
			return false;
		}
	}).change(function(){
					// alert("chjange");
					$("#nguoitip").val("").css("top", 2);		
					$("#nguoitip").focus();
			});
			
			//auto complete khach hang
	$( "#khachhang" )
	// don't navigate away from the field on tab when selecting an item
      .bind( "keydown", function( event ) {
        if ( event.keyCode === $.ui.keyCode.TAB &&
            $( this ).data( "ui-autocomplete" ).menu.active ) {
          event.preventDefault();
        }
      })
	.autocomplete({
		source: "<?php echo base_url()?>customer/search",
		focus: function() {
          // prevent value inserted on focus
          return false;
        },
		minLength: 1,
		select: function( event, ui ) {
			var friend = ui.item.value,
			span = $("<span>").text(friend),
			a = $("<a>").addClass("remove").attr({
					href: "javascript:",
					title: "Remove " + friend
				}).text("x").appendTo(span);
						
			//add friend to friend div
			span.insertBefore("#khachhang");	
			span.append("<input type='hidden' class='cust_id' name='cust_id' id='cust_id' value='"+ui.item.id+"' />");
			$("#khachhang").val("");
			//lay thong tin dich vu lan truoc
				$.ajax({
					type:'post',
					url:'<?php echo base_url();?>transaction/gethistory',
					data:{
						cust_id:ui.item.id//Cust_ID
					},
					success:function(data){
						var R = eval("("+data+")");
						$("#chitiet3").html();
						$("#chitiet3 .parent").removeClass("active");
						$("#chitiet3").append(html);
						khoitao(0);
					}
				});
			//end
			return false;
		}
	}).change(function(){
					// alert("chjange");
					$("#khachhang").val("").css("top", 2);		
					$("#khachhang").focus();
			});
				
				//add click handler to friends div
				$("#khachhangs").click(function(){
					//focus 'to' field
					$("#khachhang").focus();
				});
				
				//add live handler for clicks on remove links
				$(".remove", document.getElementById("khachhangs")).live("click", function(){
				
					//remove current friend
					$(this).parent().remove();
					
					//correct 'to' field position
					if($("#khachhangs span").length === 0) {
						$("#khachhang").css("top", 0);
					}				
				});		
	//them dich vu	
	$("#btnthemmoidv").click(function(event){
		event.preventDefault();
		//khoi tao dich vu moi
		reset_service();
	});
	
	//save transaction 
	$("#add_new").click(function(event){
		event.preventDefault();
		xl_giaodich();
	});
	
	//save dich vu
	$("#luuservice").click(function(event){
		event.preventDefault(); 
		xl_giaodich();
	});
	//end save dich vu
				
	$("#box_dichvu table tr").click(function(){
		var rel= $(this).attr("rel");
		//lay thong tin service
		$.ajax({
					type: 'post',
					url: "<?php echo base_url();?>transaction/getService",
					data: {
						rel:rel
					},
					success: function(data){
							 var R = eval('(' + data + ')'); 
							 $(".styled-select").html(R.cb_services);
							 $("#gia").val(R.Gia);
							 $("#giam").val(R.Giam);
							 $("#tientip").val(R.TienTip);
							 $("#ghichu").val(R.GhiChu);
							 $("#box_service_id").val(R.ID);
							 $("#box_isphieu").val(R.phieu);
							 $("#box_new").val("0");
							 $("#thanhtien").val(Math.round(parseInt(R.Gia) * (100 - parseInt(R.Giam))/100));
							 $("#box_percent_serv").val(R.Percent_Serv);
							 //nguoi tip
							 $("#nguoitip").val("");
							$("#friends span").remove();
							 var friend = R.e_Name,
							span = $("<span>").text(friend),
							a = $("<a>").addClass("remove").attr({
									href: "javascript:",
									title: "Remove " + friend
								}).text("x").appendTo(span);
										
							//add friend to friend div
							span.insertBefore("#nguoitip");	
							span.append("<input type='hidden' class='ee_id' name='ee_id[]' value='"+R.EE_ID+"' />");
					},
					statusCode:{
						404: function(){
							
						}
					}
		});
	});
	//tinh toan tien dich vu
	$("#giam").change(function(){
		if(!isNaN($("#giam").val())){
			$("#thanhtien").val(parseInt($("#gia").val()) * (100 - parseInt($("#giam").val()))/100);
		}else{
			alert("Gia tri nhap khong hop le");
			$("#giam").val("0");
			$("#giam").focus();
		}
	});
	$("#gia").change(function(){
		if(!isNaN($("#gia").val())){
			$("#thanhtien").val(Math.round(parseInt($("#gia").val()) * (100 - parseInt($("#giam").val()))/100));
		}else{
			alert("Gia tri nhap khong hop le");
			$("#gia").val("0");
			$("#gia").focus();
		}
	});
	$("#thanhtien").change(function(){
		if(!isNaN($("#thanhtien").val())){
			$("#giam").val(Math.round(100*((parseInt($("#gia").val())- parseInt($(this).val()))/parseInt($("#gia'.$i.'").val()))));
		}else{
			alert("Gia tri nhap khong hop le");
			$("#thanhtien").val("0");
			$("#thanhtien").focus();
		}
	});
	
	$( "#dialog_DOB" ).datepicker({
			showOn: "button",
			changeYear:true,
			changeMonth:true,
			buttonImage: "<?php echo base_url();?>resources/images/calendar.gif",
			buttonImageOnly: true,
			dateFormat: 'dd/mm/yy'
		}).change(function(){
			
	});
	//tabs
	 $( "#tabs" ).tabs({
		beforeLoad: function( event, ui ) {
			ui.jqXHR.error(function() {
				ui.panel.html("Loi ket noi" );
			});
		},
		load: function( event, ui ) {
			$("#tabs-1").css("display","none");
			khoitao(1);
			console.log(ui);
		}
	});
 });
 //xl giao dich
 function xl_giaodich(){
 var cust_id = $("#cust_id").val();
 if(!cust_id){alert("Vui long dien ten khach hang.");return false;}
	var arr_serv = [];
	var arr_nv = [];
	var arr_gd = [];
	var arr_rm = [];
		$("#chitiet3 .parent").each(function(){
			//arr_serv.push($(this).val());
			arr_serv.push($(this).find("input[name='service']").val());
			arr_nv.push($(this).find("input[name='nhanvien']").val());
			arr_rm.push($(this).find("input[name='xldichvu']").val());
		});
		$("#chitiet3 input[name='removexldichvu']").each(function(){
			arr_gd.push($(this).val());
		});
		if(arr_serv.length<1){alert("vui long chon dich vu");return false;}
		// console.log(arr_serv);
		// console.log(arr_nv);
		// console.log(arr_gd);
		// return false;
		var ghichu = $("#ghichu").val();
		var box_new = $("#box_new").val();
		var box_tran_id = $("#box_tran_id").val();
		
		var create_dt = $("#Create_Dt").val();
		$.ajax({
					type: 'post',
					url: "<?php echo base_url();?>transaction/saveGiaodich",
					data: {
						ee_id:arr_nv,
						arr_gd:arr_gd,
						arr_rm:arr_rm,
						ghichu:ghichu,
						service_id:arr_serv,
						box_new:box_new,
						box_tran_id:box_tran_id,
						cust_id:cust_id,
						create_dt:create_dt
					},
					success: function(data){
						var R = eval('(' + data + ')'); 
						//console.log(R);
						location.href=R.url;
					},
					statusCode:{
						404: function(){
							
						}
					}
		});
 }
 //xl su kien change dich vu
 function service_change(name){

		var serv_id = $("select[name='"+name+"']").val();
		if(serv_id)
			$.ajax({
				type: 'post',
				url: '<?php echo base_url()?>transaction/getPromotion',
				data: {serv_id: serv_id},
				success: function(data){
					var R = eval('(' + data + ')'); 

					$("#tientip").val(R.TienTip);
					$("#giam").val(R.Discount_Percent);
					$("#box_percent_serv").val(R.Percent_Serv);

					$("#gia").val(R.Money);
					$("#thanhtien").val(R.Price);					
				},
				statusCode:{
					404: function(){
						
					}
				}
			});
		else{
			$("#gia").val("");
			$("#giam").val("");
			$("#nguoitip").val("");
			$("#friends span").remove();
			$("#tientip").val("");
			$("#ghichu").val("");
			$("#thanhtien").val("");
		}
}
function initPage(){
	
}

function tinhlaiGia(){
	 //set price
	var stt = parseInt($("#stt").val());
	var Discount_Percent = 0;
	var Money = 0;
	var Price = 0;
	var i =1;
	for(i=1; i<=stt;i++){
		Discount_Percent += parseInt($("#giam"+i).val());
		Money += parseInt($("#gia"+i).val());
		Price += parseInt($("#thanhtien"+i).val());
	}
	$("#Money").val(Price);
	$("#Discount_Percent").val(Discount_Percent);
	$("#Price").val(Money);	
}
function reset_service(){
		$.ajax({
					type: 'post',
					url: "<?php echo base_url();?>transaction/strService",
					data: {	},
					success: function(data){
						var R = eval('(' + data + ')'); 
						$(".styled-select").html(R.cb_services);
					},
					statusCode:{
						404: function(){
							
						}
					}
		});
		$("#gia").val("");
		$("#giam").val("");
		$("#nguoitip").val("");
		$("#friends span").remove();
		$("#tientip").val("");
		$("#ghichu").val("");
		$("#thanhtien").val("");
		$("#box_new").val("1");
	}
 </script>
 <style>
#add_new{
	background: url("<?php echo base_url()?>resources/images/save-b.png") no-repeat scroll 0 0 transparent;color: #000000;
    float: right;
    height: 60px;
    padding-left: 50px;
    padding-top: 27px;
    width: 78px;}
#box_khachhang{float:left;clear:both;width:420px;}
#box_khachhang span,#box_khachhang input{float:left;}
#box_khachhang input{background-color:#DDDDDD;border:0;height: 25px;}
#khachhang{width:100px;}
#Create_Dt{width:130px;margin-left:67px;}
#khadd{ 
	cursor: pointer;
    position: relative;
    top: -5px;}
#box_dichvu{width:820px;}
#btnthemmoidv{background: url("<?php echo base_url()?>resources/images/btnAdd.png") no-repeat scroll 0 0 transparent;color: #000000;
    float: right;
    height: 34px;
    padding-left: 43px;
    padding-top: 18px;
    width: 103px;z-index:1000;position:relative;}
#box_dichvu table{position:relative;top:-39px;}
#box_dichvu table tr{cursor:pointer;}
#chitiet{
	width:434px;
	float:left;
	border-radius: 0;
	clear:both;
	background-color:transparent;
	border:0;
	padding:10px;
	margin-top:10px;
	overflow:hidden;
}
#content{min-height:auto;}
span{display:inline-table;}
#chitiet .first{ text-align: left;
    width: 100px;float:left;}
#chitiet input{float:left;}
.styled-select select {
   background: transparent;
   width: 330px;
   padding: 5px;
   line-height: 1;
   border: 0;
   border-radius: 1px;
   height: 34px;
   -webkit-appearance: none;
   }
 .styled-select {
   width: 308px;
   height: 28px;
   overflow: hidden;
   background: url("<?php echo base_url()?>resources/images/dropdown.png") no-repeat right #ddd;
   border: 0;
   float:left;
   }
   #chitiet input{background-color: #DDDDDD;
    padding: 5px;
   line-height: 1;
   border: 0;
   border-radius: 1px;
   height: 18px;}
#chitiet textarea{padding: 5px;
   line-height: 1;
   border: 0;
   border-radius: 1px;
	resize:none;background-color: #DDDDDD;border:0;width: 295px;}
#luuservice{
	background: url("<?php echo base_url()?>resources/images/save-s.png") no-repeat scroll 0 0 transparent;color: #000000;
    float: right;
    height: 26px;
    width: 51px;
	padding-left: 30px;
    padding-top: 15px;
}
#friends{width:300px;float:left;border:0;padding:0;background-color: #DDDDDD;}

#chitiet .ui-state-default, #chitiet .ui-widget-content .ui-state-default, #chitiet .ui-widget-header .ui-state-default {
    background: url("<?php echo base_url()?>resources/images/tabs.png") no-repeat scroll 0 0 transparent;
    border: 0;
    color: transparent;
	width:73px;
	height:45px;
}
#chitiet .ui-helper-reset {
    font-size: 50%;
}
#chitiet .ui-widget-content {
    background: none;
    color: #D9D9D9;
}
#chitiet .ui-widget-header {
    background: none;
    border: 0;
    color: #F6F6F6;
    font-weight: bold;
}
#chitiet .ui-tabs .ui-tabs-nav li a {
     float: left;
    padding: 0.5em 1em;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
}

#chitiet .ui-tabs .ui-tabs-nav li {
    border-bottom-width: 0;
    float: none;
    list-style: none outside none;
    margin:0;
    position: relative;
    text-align: justify;
    top: 0;
    vertical-align: middle;
    white-space: pre-wrap;
    word-wrap: break-word;
	display:inline-table;
}
#tabs .item{
	background-color: #EEEAEA;
    border: 1px solid #DDDDDD;
    border-radius: 10px 10px 10px 10px;
    cursor: pointer;
    float: left;
    height: 50px;
    margin: 5px;
    max-width: 80px;
	color:#000;
	min-width: 50px;
	font-size:12px;
	padding:3px 20px 4px 8px;
}
#chitiet .ui-tabs {
	border-top:0;
	padding:0;
	float:left;
	width:433px;
}
#chitiet .ui-tabs .ui-tabs-nav{
	left: -2px;
    padding: 0;
    position: relative;
    top: -5px;
    width: 440px;
}
#chitiet .tabs{overflow:auto;}
#chitiet .ui-corner-all, #chitiet .ui-corner-top, #chitiet .ui-corner-left, #chitiet .ui-corner-tl {
    border-top-left-radius: 12px;
}
#chitiet .ui-corner-all, #chitiet .ui-corner-top, #chitiet .ui-corner-right, #chitiet .ui-corner-tr {
    border-top-right-radius: 12px;
}

#chitiet2{
	width:410px;
	float:left;
	border-radius: 10px;
	background-color:transparent;
	border:1px solid #000;
	padding:10px;
	margin-left:10px;
}
#chitiet2 .first{ text-align: left;
    width: 82px;float:left;}
#chitiet2 input{float:left;}

#chitiet2 input{background-color: #DDDDDD;
    padding: 5px;
   line-height: 1;
   border: 0;
   border-radius: 1px;
   height: 18px;}
#chitiet2 textarea{padding: 5px;
   line-height: 1;
   border: 0;
   border-radius: 1px;
	resize:none;background-color: #DDDDDD;border:0;width: 195px;}
#chitiet2 .item{
	background-color: #EEEAEA;
    border: 1px solid #DDDDDD;
    border-radius: 10px 10px 10px 10px;
    cursor: pointer;
    float: left;
    height: 60px;
    margin: 5px;
    max-width: 80px;
    min-width: 50px;
	color:#000;
	text-align:justify;
	text-justify:inter-word;
	padding:3px 20px 4px 8px;
}

#chitiet3{
	 background-color: #FFFFFF;
    border: 1px solid #000000;
    border-radius: 1px 1px 1px 1px;
    float: right;
    margin-left: 5px;
    padding: 10px;
    width: 325px;
	height:160px;
	overflow:auto;
}
#chitiet3 .first{ text-align: left;
    width: 82px;float:left;}
#chitiet3 input{float:left;}

#chitiet3 input{background-color: #DDDDDD;
    padding: 5px;
   line-height: 1;
   border: 0;
   border-radius: 1px;
   height: 18px;}
#chitiet3 textarea{padding: 5px;
   line-height: 1;
   border: 0;
   border-radius: 1px;
	resize:none;background-color: #DDDDDD;border:0;width: 195px;}
#ghichu{float:right;}
#chitiet3 .item{
	background-color: #EEEAEA;
    border: 1px solid #DDDDDD;
    border-radius: 7px;
    cursor: pointer;
    float: left;
    height: 50px;
    margin: 5px;
    max-width: 80px;
    min-width: 50px;
	color:#000;
	padding:3px 20px 4px 8px;
}
.parent{float:left;background-color: #EEEAEA;
    border: 1px solid #DDDDDD;
    border-radius: 7px;margin:3px;}
#chitiet3 a {
     color: #000000;
    font: bold 12px Verdana,Sans-serif;
    position: relative;
    right: 2px;
    text-decoration: none;
    top: 2px;
}
#chitiet3 a:hover{
	color:red;
}

#chitiet .ui-tabs-hide{display:none;}
#tabs .active,#chitiet2 .active, #chitiet3 .active{border: 1px solid red;}
.content-left{
float:left;width:434px;}
.content-right{
float:right;width:360px;}
table#comments{width:360px;}
</style>
<h1>Giao dich - Chi tiet</h1>
<div id="content">
	<a id="add_new" href="<?php echo base_url();?>transaction/">Luu</a>			
	<div id="box_khachhang">
		<span>Ten khach hang</span> <span class="red">*</span><div id="khachhangs" class="ui-helper-clearfix">
		<?php if(!empty($customer)){?><span><?php echo $f_name." ".$l_name;?><a class="remove" href="javascript:" title="Remove Phuoc Nguyen">x</a><input type="hidden" value="<?php echo $cust_id;?>" name="cust_id" id="cust_id" class="cust_id"></span>
		<?php }?>
		<input type="text" id="khachhang" name="khachhang" value="" /></div><img id="khadd" src="<?php echo base_url()?>resources/images/btncong.png" />		
		<div class="both" style="float: left; margin-top: -6px;">
		<span>Ngay</span> <span class="red">*</span> <input id="Create_Dt" type="text" name="Create_Dt" value="<?php echo $create_dt;?>"  />	
		</div>
	</div>
	<div class="content-left">
<div id="chitiet">	
	<!-- tabs -->
	<div id="tabs">
		<ul>
		<?php 
		foreach($categories as $k=> $item){
			// if($k==0)
				// echo '<li><a href="#tabs-1">'.$item['Name'].'</a></li>';
			// else{
				echo '<li><a href="'.base_url().'transaction/getListServiceFollowDM/?id='.$item['Ca_ID'].'">'.$item['Name'].'</a></li>';
			// }
		}?>
		<!--
		<li><a href="#tabs-1">Mat</a></li>
		<li><a href="ajax/content1.html">Dieu Tri Da Mat</a></li>
		<li><a href="ajax/content2.html">Body</a></li>
		<li><a href="ajax/content3-slow.php">Dieu tri mo dui, bung</a></li>
		<li><a href="ajax/content4-broken.php">Foot care</a></li>
		<li><a href="ajax/content4-broken.php">Dich vu tron goi</a></li>
		<li><a href="ajax/content4-broken.php">Waxing</a></li>
		<li><a href="ajax/content4-broken.php">Tam</a></li>
		<li><a href="ajax/content4-broken.php">Khac</a></li>
		-->
		</ul>
		<div class="tabs" id="tabs-1">
			<!-- dich vu -- >
			<div class="item"><span>ten dich vu 1</span><input type="hidden" name="service" value="abc" /></div>
			<div class="item"><span>ten dich vu 2</span><input type="hidden" name="service" value="edf" /></div>
			<!-- end dich vu -->
		</div>
	</div><!-- end tabs -->
	<!-- 
	<div class="both" style="float: left;">
		<span class="first">Dich vu</span><div class="styled-select"><select></select></div>
	</div>

	<div class="both" style="float: left;margin-top:5px;">
		<span class="first">Khuyen mai</span> <input id="giam" type="text" name="giam" value="" size="20" />
	</div>
	<div class="both" style="float: left;margin-top:5px;">
		<span class="first">Nhan vien</span> <div id="friends" class="ui-helper-clearfix"><input id="nguoitip" type="text" name="nguoitip"/></div>
	</div>
	-->
	<input type="hidden" id="box_service_id" name="box_service_id" value="" />
	<input type="hidden" id="box_isphieu" name="box_isphieu" value="" />
	<input type="hidden" id="box_new" name="box_new" value="1" />
	<input type="hidden" id="box_tran_id" name="box_tran_id" value="<?php echo $tran_id;?>" />
	<input type="hidden" id="box_percent_serv" name="box_percent_serv" value="" />
	<div class="both"></div>
</div><!-- end chi tiet -->
<div id="chitiet2">	
	<?php foreach($employers as $item){?>
	<div class="item"><span><?php echo $item['Name'];?></span><input type="hidden" name="nhanvien" value="<?php echo $item['EE_ID'];?>" /></div>
	<?php } ?>
	<div class="both"></div>
</div><!-- end chitiet2 -->
</div><!-- end content-left -->
<div class="content-right">
<div style="float: left; width: 115px; text-align: left; margin-top: 15px;">Dich vu chon</div>
<div id="chitiet3">	
<!-- goi y -->
<?php foreach($services as $item){
?>	
	<div class="parent" ><div class="item service"><span><?php echo $item['Serv_Name'];?></span></div> <div class="item nhanvien"><span><?php echo $item['e_Name'];?></span></div><a class="remove" href="javascript:" title="Remove <?php echo $item['e_Name'];?>">x</a><input type="hidden" name="service" value="<?php echo $item['Serv_ID'];?>" /><input type="hidden" name="nhanvien" value="<?php echo $item['EE_ID'];?>" /><input type="hidden" name="xldichvu" value="<?php echo $item['ID'];?>" /></div>
	<?php }?>
<!-- end -->
</div><!-- end chitiet3 -->
<div id="ghichu">
	<span>Ghi chu</span>
	<img src="<?php echo base_url();?>resources/images/btncong.png" id="ghichuadd">
	<table id="comments">
		<tr id="header_cmt">
			<th>Ngay</th>
			<th>Ghi chu</th>
			<th>Chuc nang</th>
		</tr>
		<?php foreach($comments as $item){?>
		<tr id="cmt_<?php echo $item['ID'];?>">
			<td><?php echo date("d/m/Y",$item['Create_Dt']);?></td>
			<td><?php echo $item['Comment'];?></td>
			<td><a onclick="return deleteCmt('<?php echo $item['ID'];?>');" class="preventDefault" href="#">Xoa'</a></td>
		</tr>
		<?php }?>
	</table>
</div><!-- end ghi chu -->
</div> <!-- end content-right -->
</div>
<div class="both" style="height:10px;"></div>
</div>
<style>
		.dialog-form label, .dialog-form input { display:table-inline; }
		.dialog-form input.text { margin-bottom:12px; width:92%; padding: .4em; }
		.dialog-form fieldset { padding:0; border:0; margin-top:25px; }
		.dialog-form h1 { font-size: 1.2em; margin: .6em 0; }
		.dialog-form .ui-dialog .ui-state-error { padding: .3em; }
		.dialog-form .validateTips { border: 1px solid transparent; padding: 0.3em; }
	</style>
<script type="text/javascript">
	$(function(){
			//event double click nhan vien
			$("#chitiet2 div.item").dblclick(function(){
				var serv = $("#tabs .active input[name='service']").val();
				var serv_name = $("#tabs .active span").html();
				var nv = $("#chitiet2 .active input[name='nhanvien']").val();
				var nv_name = $("#chitiet2 .active span").html();
				if(!nv_name) {
					nv_name=$(this).find("span").html();
					nv=$(this).find("input[name='nhanvien']").val();
				}
				var isselected = $("#chitiet3 .active input[name='service']").val();
				if(!isselected){
					if(!serv || !serv_name){alert("Chua chon dich vu");return false;}
				}else{
						//$("#chitiet3 .active input[name='service']").val(serv);
						$("#chitiet3 .active input[name='nhanvien']").val(nv);
						//$("#chitiet3 .active .service span").html(serv_name);
						$("#chitiet3 .active .nhanvien span").html(nv_name);
						if($(this).parent().attr("style"))
							$('#chitiet2').bPopup().close();
						return false;
				}

				
				var selected_serv = $("#chitiet3 .active input[name='service']").val();
				// console.log(serv);
				// console.log(serv_name);
				// console.log(nv);
				// console.log(nv_name);
				if(!selected_serv){ // tao moi
					$("#chitiet3 .parent").removeClass("active");
					var html = '<div class="parent"><div class="item service"><span>'+serv_name+'</span></div> <div class="item nhanvien"><span>'+nv_name+'</span></div><a class="remove" href="javascript:" title="Remove ten dich vu 1">x</a><input type="hidden" name="service" value="'+serv+'" /><input type="hidden" name="nhanvien" value="'+nv+'" /><input type="hidden" name="xldichvu" value="0" /></div>';
					$("#chitiet3").append(html);
					khoitao(0);
				}else{
					$("#chitiet3 .active input[name='service']").val(serv);
					$("#chitiet3 .active input[name='nhanvien']").val(nv);
					$("#chitiet3 .active .service span").html(serv_name);
					$("#chitiet3 .active .nhanvien span").html(nv_name);
				}
			});
			//event nhan vien
			//event click
			$("#chitiet2 div.item").click(function(){
				var isactive = $(this).hasClass("active");
				$("#chitiet2 div.item").css("border","");
				$("#chitiet2 div.item").removeClass("active");
				if(!isactive)
					$(this).addClass("active");		
				else 
					$(this).removeClass("active");						
			});
			//event hover
			$("#chitiet2 div.item").hover( function () {
					$(this).css("border","1px solid red");
				},
				function () {
					if(!$(this).hasClass("active"))
						$(this).css("border","1px solid transparent	");
			});	
			khoitao();
					
			var dialog_F_Name = $( "#dialog_F_Name" ),
			dialog_L_Name = $( "#dialog_L_Name" ),
			dialog_DOB = $( "#dialog_DOB" ),
			dialog_Phone_NO = $( "#dialog_Phone_NO" ),
			tips = $( ".validateTips" );
			// kh_allFields = $( [] ).add( check_User_ID ).add( check_password );
		function updateTips( t ) {
			tips
				.text( t )
				.addClass( "ui-state-highlight" );
			setTimeout(function() {
				tips.removeClass( "ui-state-highlight", 1500 );
			}, 500 );
		}
		 $( "#dialog-form" ).dialog({
			autoOpen: false,
			height: 570,
			width: 570,
			modal: true,
			buttons: {
				"Tao moi": function() {
					var bValid = true;					
					//check_allFields.removeClass( "ui-state-error" );
					if(!$("#dialog_L_Name").val()) { bValid=false; updateTips("Vui lòng điền tên.");}
					if(bValid){
						$.ajax({
							type: 'post',
							url: '<?php echo base_url()?>transaction/add_new_customer',
							data: {F_Name: $("#dialog_F_Name").val(),
								L_Name: $("#dialog_L_Name").val(),
								DOB: $("#dialog_DOB").val(),
								Phone_NO: $("#dialog_Phone_NO").val()
								},
							success: function(data){
									 var R = eval('(' + data + ')');   
									// $("#Cust_ID").val(R.Cust_ID);
									// $("#khachhang").val(R.F_Name + " " +R.L_Name);
									// $("#customer_new").hide("slow");
									 //khach hang
									 $("#khachhang").val("");
									$("#khachhangs span").remove();
									 var friend = R.F_Name + " " +R.L_Name,
									span = $("<span>").text(friend),
									a = $("<a>").addClass("remove").attr({
											href: "javascript:",
											title: "Remove " + friend
										}).text("x").appendTo(span);
												
									//add friend to friend div
									span.insertBefore("#khachhang");	
									span.append("<input type='hidden' class='cust_id' id='cust_id' name='cust_id' value='"+R.Cust_ID+"' />");
									$( "#dialog-form" ).dialog( "close" );	
									//tao moi khach hang ==> transaction new
									$("#box_tran_id").val("0");
									$("#Create_Dt").val("");
									$("#box_dichvu tr.child").remove();									
									reset_service();
							},
							statusCode:{
								404: function(){
									
								}
							}
						});
					}					
				},
				"Hủy": function() {
					$( this ).dialog( "close" );
					return false;
				}
			},
			close: function() {
				//check_allFields.val( "" ).removeClass( "ui-state-error" );
				return false;
			}
		});
		$( "#khadd" ).click(function() {
				$( "#dialog-form" ).dialog( "open" );		
		});	
		
		//dialog add ghi chu
		 $( "#dialog-form-cmt" ).dialog({
			autoOpen: false,
			height: 400,
			width: 570,
			modal: true,
			buttons: {
				"Tao moi": function() {
					var bValid = true;					
					//check_allFields.removeClass( "ui-state-error" );
					if(!$("#dialog_cmt").val()) { bValid=false; updateTips("Vui lòng điền ghi chu'.");}
					if(bValid){
						$.ajax({
							type: 'post',
							url: '<?php echo base_url()?>transaction/add_new_cmt',
							data: {
								comment: $("#dialog_cmt").val(),
								tran_id: $("#box_tran_id").val()
								},
							success: function(data){
									 var R = eval('(' + data + ')');   
									$("#header_cmt").after(R.html);
									$( "#dialog-form-cmt" ).dialog( "close" );
							},
							statusCode:{
								404: function(){
									
								}
							}
						});
					}					
				},
				"Hủy": function() {
					$( this ).dialog( "close" );
					return false;
				}
			},
			close: function() {
				//check_allFields.val( "" ).removeClass( "ui-state-error" );
				return false;
			}
		});
		$( "#ghichuadd" ).click(function() {
				if($("#box_tran_id").val()){
					$( "#dialog-form-cmt" ).dialog( "open" );		
				}else{
					alert("Chua co' giao dich");
				}	
		});	
		//end ghi chu
		
		
	});
	
	function khoitao(istabs){	
	// event dich vu
			//event hover
			if(istabs){
				$("#tabs div.item").hover( function () {
						$(this).css("border","1px solid red");
					},
					function () {
						if(!$(this).hasClass("active"))
							$(this).css("border","1px solid transparent	");
				});
				//event click
				$("#tabs div.item").click(function(){
					var isactive = $(this).hasClass("active");
					$("#tabs div.item").css("border","");
					$("#tabs div.item").removeClass("active");
					if(!isactive)
						$(this).addClass("active");		
					else 
						$(this).removeClass("active");		
				});
				$("#tabs div.item").dblclick(function(){
					var serv = $("#tabs .active input[name='service']").val();
					var serv_name = $("#tabs .active span").html();
					if(!serv_name) {
						serv_name=$(this).find("span").html();
						serv=$(this).find("input[name='service']").val();
					}
					var isselected = $("#chitiet3 .active input[name='service']").val();
					if(!isselected){
						
					}else{
						$("#chitiet3 .active input[name='service']").val(serv);
						//$("#chitiet3 .active input[name='nhanvien']").val(nv);
						$("#chitiet3 .active .service span").html(serv_name);
						//$("#chitiet3 .active .nhanvien span").html(nv_name);
						if($(this).parent().parent().parent().attr("style"))
							$('#chitiet').bPopup().close();
					}
					return false;		
				});
			}else{
				//event selected
				//event click
				$("#chitiet3 div.parent").click(function(){
					var isactive = $(this).hasClass("active");
					$("#chitiet3 div.parent").css("border","");
					$("#chitiet3 div.parent").removeClass("active");
					if(!isactive)
						$(this).addClass("active");		
					else 
						$(this).removeClass("active");		
				});
				//event hover
				$("#chitiet3 div.parent").hover( function () {
						$(this).css("border","1px solid red");
					},
					function () {
						if(!$(this).hasClass("active"))
							$(this).css("border","1px solid transparent");
				});	
				
				//add live handler for clicks on remove links
				$(".remove", document.getElementById("chitiet3")).live("click", function(){
						//remove current service
					//alert($(this).parent().find("input[name='xldichvu']").val());
					$("#chitiet3").append('<input type="hidden" name="removexldichvu" value="'+$(this).parent().find("input[name='xldichvu']").val()+'" />');
					$(this).parent().remove();		
					
				});
				
				//pop up nhan vien
				$("#chitiet3 div.service").dblclick(function(){
					$(this).parent().addClass("active");
					 $('#chitiet').bPopup({
						speed: 650,
						transition: 'slideIn',
						 onOpen: function(){ //doMagic 
							$("#chitiet .ui-widget-content").css("background-color","#fff");
						 },
						  onClose: function(){ //doMagic
							$("#chitiet .ui-widget-content").css("background-color","transparent");
							var chitiet = $("#chitiet");
							$("#chitiet2").before(chitiet);
							$("#chitiet").attr("style","");
						  }
					});
				});
				$("#chitiet3 div.nhanvien").dblclick(function(){
					$(this).parent().addClass("active");
					 $('#chitiet2').bPopup({
						speed: 650,
						transition: 'slideIn',
						 onOpen: function(){ //doMagic 
							$("#chitiet2").css("background-color","#fff");
						 },
						  onClose: function(){ //doMagic
							$("#chitiet2").css("background-color","transparent");
							var chitiet2 = $("#chitiet2");
							$("#chitiet").after(chitiet2);
							$("#chitiet2").attr("style","");
						  }
					});
				});
			}
	}
	//xoa ghi chu
	function deleteCmt(id){
		//xoa trong database
		var answer = confirm("Co' muon xoa ghi chu' hok???")
		if (answer){
			$.ajax({
				type: 'post',
				url: '<?php echo base_url()?>transaction/del_cmt',
				data: {
					id: id
				},
				success: function(data){
					// var R = eval('(' + data + ')');   	
					console.log(data);
				},
				statusCode:{
					404: function(){
										
					}
				}
			});
			$('#cmt_'+id).remove();
		}
		return false;
	}
</script>
<!-- box up them nhan vien -->
<div id="dialog-form" class="dialog-form" title="Them khach hang">
	<p class="validateTips">Điền đầy đủ thông tin bên dưới.</p>

	<form>
	<fieldset>
		<label for="dialog_F_Name">Ho</label>
		<input type="text" name="dialog_F_Name" id="dialog_F_Name" placeholder="Ho" class="text ui-widget-content ui-corner-all" />
		<label for="dialog_L_Name">Tên</label>
		<input type="text" name="dialog_L_Name" id="dialog_L_Name" placeholder="Ten" class="text ui-widget-content ui-corner-all" />
		<label for="dialog_DOB">Ngay sinh</label>
		<input type="text" name="dialog_DOB" id="dialog_DOB" placeholder="Ngay sinh" class="text ui-widget-content ui-corner-all" />
		<label for="dialog_Phone_NO">So DT</label>
		<input type="text" name="dialog_Phone_NO" id="dialog_Phone_NO" placeholder="so dien thoai" class="text ui-widget-content ui-corner-all" />
	</fieldset>
	</form>
</div><!-- end dialog-form -->

<!-- box up them comment -->
<div id="dialog-form-cmt" class="dialog-form" title="Them ghi chu">
	<p class="validateTips"></p>
	<form>
	<fieldset>
		<label for="dialog_comment">Ghi chu</label>
		<textarea id="dialog_cmt" rows="5" cols="51" name="dialog_cmt" class="text ui-widget-content ui-corner-all"></textarea>
	</fieldset>
	</form>
</div><!-- end dialog-form -->